<template>
	<view class="form-wrap">
		<form @submit="submit">

			<view class="form-group">
				<view class="form-group__title">输入整数</view>
				<view class="form-group__con">
					<input class="form-group__from" name='vals' type="number" placeholder="请输入" placeholder-class="placeholder" />
				</view>
			</view>

			<view class="form-group">
				<view class="form-group__title">输入框</view>
				<view class="form-group__con">
					<input class="form-group__from " type="text" placeholder="请输入" placeholder-class="placeholder" />
				</view>
			</view>
			<view class="form-group">
				<view class="form-group__title">下拉选择框</view>
				<view class="form-group__con">
					<picker class="form-group__from link" mode="selector" :range="range" @change="pickerChange">
						<view class="picker-res">{{pickerRes}}</view>
					</picker>
				</view>
			</view>
			<view class="form-group">
				<view class="form-group__title">选择地址</view>
				<view class="form-group__con form-group__address" @tap="handleTap('picker3')">
					
				</view>
			</view>
			<view class="form-group form-group__upload">
				<view class="form-group__title">请上传身份证</view>
				<view class="form-group__con">
					<view class="upload-item">
						<image class="upload-img" src="../../static/common/icon_04.png"></image>
						<view class="upload-tip">身份证正面</view>
					</view>
					<view class="upload-item">
						<image class="upload-img" src="../../static/common/icon_04.png"></image>
						<view class="upload-tip">身份证反面</view>
					</view>
				</view>
			</view>
			<view class="form-group form-group__text">
				<textarea class="form-group__from" value="" placeholder="请输入信息" placeholder-class="placeholder" />
				</view>
		
		<!-- 地址选择器 -->
		<lb-picker ref="picker3"
		  v-model="value3"
		  mode="multiSelector"
		  :list="list"
		  :level="3"
		  @change="handleChange"
		  @confirm="handleConfirm"
		  @cancle="handleCancle">
		</lb-picker>
		<button type="default" form-type="submit">提交</button>
	</form>
	</view>
</template>

<script>
		import areaData from '../../utils/area-data-min.js'
	export default{
		data() {
			return{
				pickerRes: '点击选择',
				range: ['罗冰酱', '娜美桑', '山治', '蒙奇D路飞', '罗罗诺亚索隆', '弗兰奇', '布鲁克', '甚平', '乔巴', '乌索普'],
				list: areaData,
				value3: []
			}
		},
		methods: {
			handleTap (picker) {
				this.$refs[picker].show()
			},
			pickerChange(e) {
				this.pickerRes = e.detail.value
			},
			handleChange (item) {
				console.log('change::', item)
			},
			handleConfirm (res) {
				console.log('confirm::', item)
				let item = res.item
				let address = item[0]['label'] + item[1]['label'] + item[2]['label']
				let valueArr = [item[0]['value'], item[1]['value'], item[2]['value']]
			},
			handleCancle (item) {
				console.log('cancle::', item)
			},
			submit(e) {
				
				
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url('../../app.less');
	.form-wrap{
		padding: 0 20upx;
		box-sizing: border-box;
	}
	.form-group{
		.flex-base;
		height: 100upx;
		border-bottom: 1px solid @border-color;
		background: @f;
	}
	.form-group__title{
		color: #1a1a1a;
		font-size: @font-size-32;
		flex-shrink: 0;
		width: 180upx;
	}
	.form-group__con{
		flex-grow: 2;
		height: 100%;
		.form-group__from{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
		}
		.form-group__picker{
			width: 100%;
			height: 100%;
			
		}
	}
	.form-group__text{
		width: 100%;
		padding: 20upx 0;
		height: auto;
		min-height: 300upx;
		.form-group__from{
			min-height: 150upx;
			width: 100%;
		}
	}
	
</style>
